<template>
  <div class="activity-phone-preview">
    <div class="user">
      <span class="user-name">张三</span>
      <img class="user-avator" src="/static/user.png" alt="" />
    </div>
    <el-scrollbar :height="scrollHeight" @scroll="scroll">
      <slot></slot>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted } from 'vue'

interface SizeType{
  [propsName: string]: number
}

const config = reactive<SizeType>({
  width: 240
})

const state = reactive<SizeType>({
  width: 375,
  height: 667,
  radius: 54,
  border: 10,
  paddingTop: 222,
  paddingBottom: 28,
  backgroundSizeHeight: 260,
  imgLangth: 60
})

const complex = computed(() => config.width / state.width)
const width = computed(() => `${Math.round(config.width)}px`)
const height = computed(() => `${Math.round(complex.value * state.height)}px`)
const radius = computed(() => `${Math.round(complex.value * state.radius)}px`)
const border = computed(() => `${Math.round(complex.value * state.border * 1.2)}px`)
const paddingTop = computed(() => `${Math.round(complex.value * state.paddingTop)}px`)
const paddingBottom = computed(() => `${Math.round(complex.value * state.paddingBottom)}px`)
const contentHeight = computed(() => `${parseInt(height.value) - parseInt(paddingTop.value) - parseInt(paddingBottom.value)}px`)
const scrollHeight = computed(() => `${parseInt(height.value) - parseInt(paddingTop.value) - parseInt(paddingBottom.value) - parseInt(imgLangth.value)}px`)
const backgroundSizeHeight = computed(() => `${Math.round(complex.value * state.backgroundSizeHeight)}px`)
const imgLangth = computed(() => `${Math.round(complex.value * state.imgLangth)}px`)

const emit = defineEmits(['scroll'])

const scroll = () => {
  emit('scroll')
}

</script>
<style scoped lang="scss">
  .activity-phone-preview{
    width: v-bind(width);
    height: v-bind(contentHeight);
    border: v-bind(border) solid #EFF4F6;
    border-radius: v-bind(radius);
    background-image: url('/static/app/tm.png'), url('@/assets/image/phonePreview/activity_phone_bar.png');
    background-position: left top, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: auto v-bind(backgroundSizeHeight), contain;
    background-color: #FBFBFB;
    padding-top: v-bind(paddingTop);
    padding-bottom: v-bind(paddingBottom);

    .user{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding-right: 8px;
      .user-name{
        font-size: 12px;
        color: #fff;
        margin-bottom: 10px;
      }
      .user-avator{
        width: v-bind(imgLangth);
        height: v-bind(imgLangth);
      }
    }
  }
</style>